<template>
    <div class="container app-container">
        <div class="title" style="margin:20px 0 20px 0;height:20px;line-height:20px;border-left:1px solid #CCC;text-indent:15px;">基本信息</div>
        <div class="form">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">

                <!-- 遍历字段 -->
                                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="求职标题" prop="title">
                                    <el-input v-model="title" placeholder="请输入" maxlength="10" show-word-limit/>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="订单状态" prop="state">
                                    <el-select
                                            v-model="form.state" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in stateList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="备注" prop="remark">
                                    <el-input v-model="form.remark" style="width: 500px;" type="textarea" placeholder="请输入内容" maxlength="500" size="medium" show-word-limit/>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="船员" prop="userId">
                                    <el-select
                                            v-model="form.userId" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in userIdList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="姓名" prop="crewRealname">
                                    <el-input v-model="crewRealname" placeholder="请输入" maxlength="10" show-word-limit/>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="年龄" prop="crewAge">
                                    <el-input v-model="crewAge" placeholder="请输入" maxlength="10" show-word-limit/>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="性别" prop="crewGender">
                                    <el-select
                                            v-model="form.crewGender" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in crewGenderList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="城市" prop="crewCity">
                                    <el-select
                                            v-model="form.crewCity" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in crewCityList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="学历" prop="crewEducation">
                                    <el-input v-model="crewEducation" placeholder="请输入" maxlength="10" show-word-limit/>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="工作经验" prop="crewExperience">
                                    <el-input v-model="crewExperience" placeholder="请输入" maxlength="10" show-word-limit/>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="截止日期" prop="endDate">
                                    <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="职务资格类别" prop="credentialsType">
                                    <el-select
                                            v-model="form.credentialsType" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in credentialsTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="证书等级" prop="credentialsLevel">
                                    <el-select
                                            v-model="form.credentialsLevel" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in credentialsLevelList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                                <el-form-item label="创建方式" prop="createType">
                                    <el-select
                                            v-model="form.createType" placeholder="请选择"
                                            
                                            
                                    >
                                        <el-option v-for="item in createTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                        </el-col>
                    </el-row>
                <!-- 遍历字段 -->

            </el-form>
        </div>

        <div class="footer">
            <el-button size="mini" type="primary" @click="submitForm" class="submit-btn" v-preventReClick>确认保存</el-button>
        </div>

    </div>
</template>

<script>
    // 导入接口方法
    import { addCrew, updateCrew } from '@/api/common/common';

    export default {
        // 要改命名，比如课程编辑页可以叫 courseAddOrUpdate
        name: 'crewAddAndEdit',
        dicts: [],
        components: {},
        data() {
            return {
                // 标题
                title: '船员表单',
                // 初始化 id 为 null
                id: null,
                // 初始化 isEdit 为 false
                isEdit: false,
                // 表单参数
                form: {
                            title: '',
                            state: null,
                            remark: null,
                            userId: null,
                            crewRealname: '',
                            crewAge: 0,
                            crewGender: null,
                            crewCity: null,
                            crewEducation: '',
                            crewExperience: 0,
                            endDate: null,
                            credentialsType: null,
                            credentialsLevel: null,
                            createType: null,
                },
                // 表单校验
                rules: {
                },
            };
        },
        created() {
            // 通过 $route.params 获取路由参数
            this.id = this.$route.query.id ? this.$route.query.id : null;
            console.log(this.id);
            // 判断是否存在 id 参数
            this.isEdit = !!this.id;
            if (this.isEdit) {
                // 如果存在 id 参数，则说明当前页面是修改状态
                // 可以根据 id 参数获取需要修改的数据
                this.getDetail(this.id);
            } else {
                // 如果不存在 id 参数，则说明当前页面是新增状态
            }
        },
        mounted() {},
        methods: {
            // 表单重置
            reset() {
                this.form = {
                            title: '',
                            state: null,
                            remark: null,
                            userId: null,
                            crewRealname: '',
                            crewAge: 0,
                            crewGender: null,
                            crewCity: null,
                            crewEducation: '',
                            crewExperience: 0,
                            endDate: null,
                            credentialsType: null,
                            credentialsLevel: null,
                            createType: null,
                };
                this.resetForm('form');
            },

            /** 获取form表单数据 */
            async getDetail(id) {
                try {
                    const res = await getDetail(id);
                    if (res.code == 200) {
                        const {
                            title,state,remark,userId,crewRealname,crewAge,crewGender,crewCity,crewEducation,crewExperience,endDate,credentialsType,credentialsLevel,createType,
                        } = res.data;

                        this.form = {
                                title,
                                state,
                                remark,
                                userId,
                                crewRealname,
                                crewAge,
                                crewGender,
                                crewCity,
                                crewEducation,
                                crewExperience,
                                endDate,
                                credentialsType,
                                credentialsLevel,
                                createType,
                        };
                    }
                } catch (err) {
                    console.error(err);
                }
            },

            /** 提交按钮 */
            submitForm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.id != null) {
                            this.$confirm('确定修改当前内容', '确定保存', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning',
                            })
                                .then(() => {
                                    // 调用修改接口
                                    this.handleUpdate();
                                })
                                .catch(() => {});
                        } else {
                            this.$confirm(
                                '确定发布',
                                '确定发布',
                                {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                },
                            )
                                .then(() => {
                                    // 调用新增接口
                                    this.handleAdd();
                                })
                                .catch(() => {});
                        }
                    }
                });
            },

            /** 新增 */
            handleAdd() {
                let saveData = {
                    ...this.form,
                };
                // 预处理接口传参
                // saveData.thumbnailUrl = process.env.VUE_APP_IMG_PRE + saveData.thumbnailUrl;
                this.$modal.loading('正在保存...');

                addCrew(saveData)
                    .then((res) => {
                        if (res.code == 200) {
                            this.close();
                        } else {
                            this.$message.error(res.message);
                        }
                        this.$modal.closeLoading();
                    })
                    .catch((err) => {
                        this.$modal.closeLoading();
                    });
            },

            /** 更新 */
            handleUpdate() {
                let saveData = {
                    ...this.form,
                };
                // 预处理接口传参
                saveData.id = this.id;
                this.$modal.loading('正在保存...');

                updateCrew(saveData)
                    .then((res) => {
                        if (res.code == 200) {
                            this.close();
                        }
                        this.$modal.closeLoading();
                    })
                    .catch((err) => {
                        this.$modal.closeLoading();
                    });
            },

            /** 关闭按钮 */
            close() {
                // 跳转地址 和 携带参数
                const obj = {
                    path: '/crew/list',
                    query: {
                        t: Date.now(),
                        pageNum: this.$route.query.pageNum
                    },
                };
                this.$tab.closeOpenPage(obj).then(() => {
                    this.$tab.refreshPage(obj);
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container { position: relative; }
    .submit-btn { position: fixed; bottom: 10px; left: 50%;}
</style>
